import React, {useEffect, useState} from 'react';
import { result } from "../src/component/ResultDisplay/data";
import {
    StyleSheet,
    View,
    Text
} from 'react-native';

const Index: React.FC = (props) => {

    const resultDisplay = () => {
        return props.result.data.ljlist.map(item => {
            return (
                <View style={styles.resultItem} key={item.title}>
                    <View><Text style={styles.resultText}>{item.title}</Text></View>
                    <View><Text style={styles.resultText}>{item.name}</Text></View>
                </View>
            )
        })
    }

    const emptyResultDisplay = () => {
        return (
            <View>
                <Text style={styles.emptyResultText}>Unrecognized</Text>
            </View>
        )
    }

    return (
        <View style={styles.resultWrapper}>
            <View style={styles.titleWrapper}><Text style={styles.title}>Garbage Classification Result</Text></View>
            {
                props.result && props.result.data && props.result.data.ljlist.length > 0?
                    resultDisplay()
                    :
                    emptyResultDisplay()
            }
        </View>
    );
};

const styles = StyleSheet.create({
    titleWrapper: {
        marginBottom: 25,
        marginTop: 10,
    },
    title: {
        color: 'white',
        fontSize: 18,
        textShadowColor: 'black',
        textShadowOffset: {width: 5, height: 5},
        textShadowRadius: 3
    },
    resultWrapper: {
        width: 305,
        height: '31%',
        borderColor: 'green',
        borderWidth: 3,
        alignItems: 'center',
        position: 'absolute',
        top: '11%',
        left: '13%',
        zIndex: 999,
    },
    resultItem: {
        padding: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '90%',
    },
    resultText: {
        color: 'white'
    },
    emptyResultText: {
        color: 'white',
        fontSize: 40,
        marginTop: 120
    },
    nameText: {
        borderColor: 'blue',
        borderWidth: 1,
        borderRadius: 10,
        width: 80,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default Index;
